<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<div class="flex">
    <!--  aside  -->
    <div class="flex-sub fill bg-black" style="height: 100vh;">
        <div class="margin-xs bg-black radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-home_shouye"></i>
            <span class="text-xs margin-left-xs text-bold text-overflow-sub">学生管理系统</span>
        </div>
        <div class="margin-xs bg-blue radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-phone_shouji"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">首页</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-edit_bianji"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">学院管理</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-code_daima"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">专业管理</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-call_huru"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">班级管理</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-kechengbao"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">教师管理</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-baocun"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">学生管理</span>
        </div>
        <div class="margin-xs bg-white radius-xs padding-xs flex align-center cursor menu-item">
            <i class="iconfont icon-banshu"></i>
            <span class="text-bold-4 margin-left-xs text-overflow-sub">课程管理</span>
        </div>
    </div>
    <div class="flex-sixth">
        <!--    header    -->
        <div class="bg-white w-100 h-50 flex align-center padding-lr-sm justify-between">
            <div class="padding-xxs radius-xs">
                <i class="iconfont icon-qiehuan1x cursor"></i>
            </div>
            <div class="cursor">
                <div class="avatar-xs bg-black"></div>
            </div>
        </div>
        <!--    page    -->
        <div class="margin-sm bg-white padding-xs radius-xs overflow-h" style="height: calc(100vh - 90px);">
            <!--      action-bar      -->
            <div class="h-50 border-bottom flex">
                <div class="btn padding-xs radius-xxs bg-green light cursor margin-xs flex align-center">
                    <i class="iconfont icon-category_fenlei padding-right-xxs"></i>
                    <div class="text-overflow-sub">添加</div>
                </div>
                <div class="btn padding-xs radius-xxs bg-red light cursor margin-xs flex align-center">
                    <i class="iconfont icon-delete_shanchu padding-right-xxs"></i>
                    <div class="text-overflow-sub">批量删除</div>
                </div>
                <div class="btn padding-xs radius-xxs bg-blue light cursor margin-xs flex align-center">
                    <i class="iconfont icon-upload_shangchuan padding-right-xxs"></i>
                    <div class="text-overflow-sub">导入</div>
                </div>
                <div class="btn padding-xs radius-xxs bg-blue light cursor margin-xs flex align-center">
                    <i class="iconfont icon-download_xiazai padding-right-xxs"></i>
                    <div class="text-overflow-sub">导出</div>
                </div>
            </div>
            <!--      table      -->
            <div class="padding-xxs">
                <!-- Row Highlight Javascript -->
                <script type="text/javascript">
                    window.onload = function () {
                        var tfrow = document.getElementById('tfhover').rows.length;
                        var tbRow = [];
                        for (var i = 1; i < tfrow; i++) {
                            tbRow[i] = document.getElementById('tfhover').rows[i];
                            tbRow[i].onmouseover = function () {
                                this.style.backgroundColor = '#ffffff';
                            };
                            tbRow[i].onmouseout = function () {
                                this.style.backgroundColor = '#d4e3e5';
                            };
                        }
                    };
                </script>

                <style type="text/css">
                    table.tftable {
                        font-size: 12px;
                        color: #333333;
                        width: 100%;
                        border-width: 1px;
                        border-color: #729ea5;
                        border-collapse: collapse;
                    }

                    table.tftable th {
                        font-size: 12px;
                        background-color: #acc8cc;
                        border-width: 1px;
                        padding: 8px;
                        border-style: solid;
                        border-color: #729ea5;
                        text-align: left;
                    }

                    table.tftable tr {
                        background-color: #d4e3e5;
                    }

                    table.tftable td {
                        font-size: 12px;
                        border-width: 1px;
                        padding: 8px;
                        border-style: solid;
                        border-color: #729ea5;
                    }
                </style>

                <table id="tfhover" class="tftable" border="1">
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                        <th>Header 5</th>
                    </tr>
                    <tr>
                        <td>Row:1 Cell:1</td>
                        <td>Row:1 Cell:2</td>
                        <td>Row:1 Cell:3</td>
                        <td>Row:1 Cell:4</td>
                        <td>Row:1 Cell:5</td>
                    </tr>
                    <tr>
                        <td>Row:2 Cell:1</td>
                        <td>Row:2 Cell:2</td>
                        <td>Row:2 Cell:3</td>
                        <td>Row:2 Cell:4</td>
                        <td>Row:2 Cell:5</td>
                    </tr>
                    <tr>
                        <td>Row:3 Cell:1</td>
                        <td>Row:3 Cell:2</td>
                        <td>Row:3 Cell:3</td>
                        <td>Row:3 Cell:4</td>
                        <td>Row:3 Cell:5</td>
                    </tr>
                    <tr>
                        <td>Row:4 Cell:1</td>
                        <td>Row:4 Cell:2</td>
                        <td>Row:4 Cell:3</td>
                        <td>Row:4 Cell:4</td>
                        <td>Row:4 Cell:5</td>
                    </tr>
                    <tr>
                        <td>Row:5 Cell:1</td>
                        <td>Row:5 Cell:2</td>
                        <td>Row:5 Cell:3</td>
                        <td>Row:5 Cell:4</td>
                        <td>Row:5 Cell:5</td>
                    </tr>
                    <tr>
                        <td>Row:6 Cell:1</td>
                        <td>Row:6 Cell:2</td>
                        <td>Row:6 Cell:3</td>
                        <td>Row:6 Cell:4</td>
                        <td>Row:6 Cell:5</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
